const path = require('path')
const CompressionPlugin = require('compression-webpack-plugin');
const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin');
const HappyPack = require('happypack')
function resolve (dir) {
    return path.join(__dirname, dir)
  }
module.exports = {
    // 线上报错时定位到代码位置,可以关掉,会泄露源代码
    productionSourceMap: false,
    lintOnSave: true,
    publicPath: process.env.NODE_ENV === 'production' ? './' : './',
    configureWebpack: {
        plugins: [
            // 开启压缩
            new CompressionPlugin({
                algorithm: 'gzip', // 使用gzip压缩
                test: /\.(js|css|html)(\?.*)?$/i, //需要压缩的文件正则
                threshold: 10240, //文件大小大于这个值时启用压缩
                deleteOriginalAssets: false //压缩后保留原文件
            }),
            // 打包进度
            new SimpleProgressWebpackPlugin(),
        ]
    },
    chainWebpack: config => {
        // 定义文件夹的路径
        config.resolve.alias
        .set('@', resolve('src'))
        .set('assets', resolve('src/assets'))
        .set('components', resolve('src/components'))
        .set('router', resolve('src/router'))
        .set('store', resolve('src/store'))
        .set('views', resolve('src/views'));
        
        if(process.env.NODE_ENV === 'production'){
         // 可视化文件大小
        config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin);
        // 压缩图片
        const imagesRule = config.module.rule('images')
        imagesRule.uses.clear()
        imagesRule.use('file-loader')
            .loader('url-loader')
            .options({
             limit: 10240,
             fallback: {
              loader: 'file-loader',
              options: {
                name:'[hash][name].[ext].webp',
                outputPath: '/images'
              }
            }
          })
        }
      // 多线程
      config.plugin('HappyPack').use(HappyPack, [
        {
          loaders: [
            {
              loader: 'babel-loader?cacheDirectory=true'
            }
          ]
        }
      ])
    },
    devServer: {
        port: 8808, // 端口号
        host: 'localhost',
        // https: false, // https:{type:Boolean}
        open: false //配置自动启动浏览器
    },
    //
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-plugin-px2rem')({
                        // rootValue: 100, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
                        // unitPrecision: 5, //允许REM单位增长到的十进制数字。
                        //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
                        // propBlackList: [], //黑名单
                        rootValue: 16,
                        exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
                        // selectorBlackList: [], //要忽略并保留为px的选择器
                        // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
                        // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
                        mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
                        minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
                    })
                ]
            }
        }
    }
};
